<template>
	<div class="darensousuo">
		<!--上级-->
		<div class="fensiqian">
			<div class="darensou">
				<div class="darensou1">
					<input type="search" value="" placeholder="请输入商品名称" />
					<button style="cursor: pointer;">
						<i class="el-icon-search"></i>
					</button>
				</div>
				<div class="darensou2">
				    今日剩余搜索次数 <span>50</span> 次
				</div>
			</div>
			
			<div class="darenbiaoqian">
				<div class="darenbiaoqian1">
					达人标签
				</div>
				<div class="darenbiaoqian2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="darenbiaoqian3">
					<div class="xuan" v-for="(item,index) in 50" :key="index">
						<input type="checkbox" :id="item" name="zhong" :value="item" /><label :for="item">美食</label>
					</div>
				</div>
			</div>
			
			<div class="darenfensi">
				<div class="darenfensi1">
					粉丝数
				</div>
				<div class="darenfensi2">
					<div class="buxian1">
						不限
					</div>
				</div>
				<div class="darenfensi3">
					<div class="darenfensi3_1">
						<ul>
							<li v-for="(item,index) in 6" :key="index">
								10万~50万
							</li>
						</ul>
					</div>
					<div class="darenfensi3_2">
						<div class="darenfensi_suan1">
							<input type="text" v-model="wan1" value="" />万
						</div>
						<div class="darenfensi_suan2"></div>
						<div class="darenfensi_suan3">
							<input type="text" v-model="wan2" value="" />万
						</div>
						<div class="darenfensi_suan4">
							确定
						</div>
					</div>
				</div>
			</div>
			
			<div class="darenshuxing">
				<div class="darenshuxing1">
					达人属性
				</div>
				<div class="darenshuxing2">
					<div :class="{'buxian1':!value,'buxian2':value}">
						不限
					</div>
				</div>
				<div class="fenxing_xiala">
					<div class="fenxing_xiala1">
						<el-select v-model="value" @change="xiazhi" clearable placeholder="达人性别">
							<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala2">
						<el-select v-model="value" clearable placeholder="达人所在地">
							<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala3">
						<el-select v-model="value" clearable placeholder="达人认证">
							<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			
			<div class="darenshuxing">
				<div class="darenshuxing1">
					数据范围
				</div>
				<div class="darenshuxing2">
					<div :class="{'buxian1':!value1,'buxian2':value1}">
						不限
					</div>
				</div>
				<div class="fenxing_xiala">
					<div class="fenxing_xiala1">
						<el-select v-model="value1" clearable placeholder="中位点赞数">
							<el-option
							v-for="item in options1"
							:key="item.value1"
							:label="item.label1"
							:value="item.value1">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala2">
						<el-select v-model="value1" clearable placeholder="中位评论数">
							<el-option
							v-for="item in options1"
							:key="item.value1"
							:label="item.label1"
							:value="item.value1">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala3">
						<el-select v-model="value1" clearable placeholder="中位分享数">
							<el-option
							v-for="item in options1"
							:key="item.value1"
							:label="item.label1"
							:value="item.value1">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			
			<div class="darenshuxing">
				<div class="darenshuxing1">
					粉丝属性
				</div>
				<div class="darenshuxing2">
					<div :class="{'buxian1':!value2,'buxian2':value2}">
						不限
					</div>
				</div>
				<div class="fenxing_xiala">
					<div class="fenxing_xiala1">
						<el-select v-model="value2" clearable placeholder="达人性别">
							<el-option
							v-for="item in options2"
							:key="item.value2"
							:label="item.label2"
							:value="item.value2">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala2">
						<el-select v-model="value2" clearable placeholder="粉丝年龄">
							<el-option
							v-for="item in options2"
							:key="item.value2"
							:label="item.label2"
							:value="item.value2">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala3">
						<el-select v-model="value2" clearable placeholder="粉丝地域">
							<el-option
							v-for="item in options2"
							:key="item.value2"
							:label="item.label2"
							:value="item.value2">
							</el-option>
						</el-select>
					</div>
					<div class="fenxing_xiala3">
						<el-select v-model="value2" clearable placeholder="粉丝质量">
							<el-option
							v-for="item in options2"
							:key="item.value2"
							:label="item.label2"
							:value="item.value2">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
		</div>
		
		<!--下级-->
		<div class="fensishaixuan">
			<div class="fensishaixuantop">
				<div class="fensishaixuantop1">
					筛选 > 
				</div>
				<div class="fensishaixuantop2">
					所属平台：<span>{{$store.state.pintaiName}}</span>
				</div>
			</div>
			
			<div class="fenshaibiao">
				<table cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th class="diyizhi" colspan="2">名称</th>
							<th @click="qiehuan">
								<div class="shangxia1">粉丝总数</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan==2}"></i>
								</div>
							</th>
							<th @click="qiehuan1">
								<div class="shangxia1">粉丝质量</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan1==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan1==2}"></i>
								</div>
							</th>
							<th @click="qiehuan2">
								<div class="shangxia1">中位点赞数</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan2==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan2==2}"></i>
								</div>
							</th>
							<th @click="qiehuan3">
								<div class="shangxia1">中位评论数</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan3==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan3==2}"></i>
								</div>
							</th>
							<th @click="qiehuan4">
								<div class="shangxia1">中位分享数</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan4==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan4==2}"></i>
								</div>
							</th>
							<th @click="qiehuan5">
								<div class="shangxia1">近30天粉丝增量</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan5==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan5==2}"></i>
								</div>
							</th>
							<th @click="qiehuan6">
								<div class="shangxia1">深码指数</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan6==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan6==2}"></i>
								</div>
							</th>
							<th></th>
						</tr>
					</thead>
					
					<tbody>
						<tr v-for="(item,index) in 10" :key="index">
							<td>
								<router-link :to="'/home/'+xiang_shu+'/darenxiangqingye'">
									<img src="../../../../assets/img/kuaishou.png" />
								</router-link>
							</td>
							<td>
								<router-link :to="'/home/'+xiang_shu+'/darenxiangqingye'">
									疯狂小杨哥
								</router-link>
							</td>
							<td>{{shu | guolv}}</td>
							<td>{{shu | guolv}}</td>
							<td>{{shu | guolv}}</td>
							<td>{{shu | guolv}}</td>
							<td>{{shu | guolv}}</td>
							<td>{{shu | guolv}}</td>
							<td>991</td>
							<td>
								<div class="jiaxuan">
									<span>+</span>加入达人池
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="mianfei">
                    免费版 仅可查看10条数据<span @click="open">立即升级</span>查看全部数据
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"darensousuo",
		data(){
			return{
				shu:54864653,
				checkList:[],
				//达人属性
				options: [{
					value: '男',
					label: '男'
				}, {
				  value: '女',
				  label: '女'
				}],
				value: '',
				//数据范围
				options1: [{
					value1: '100-1000',
					label1: '100-1000'
				}, {
				  value1: '200-2000',
				  label1: '200-2000'
				}],
				value1: '',
				//粉丝属性
				options2: [{
					value2: '海绵宝宝',
					label2: '海绵宝宝'
				}, {
				  value2: '懒羊羊',
				  label2: '懒羊羊'
				}],
				value2: '',
				
				//两个数字范围万
				wan1:'',
				wan2:'',
				
				xiang_shu:'',
				
				fuxuan:[],
				
				qie:0,
				huan:0,
				
				qie1:0,
				huan1:0,
				
				qie2:0,
				huan2:0,
				
				qie3:0,
				huan3:0,
				
				qie4:0,
				huan4:0,
				
				qie5:0,
				huan5:0,
				
				qie6:0,
				huan6:0,
			}
		},
		created(){
			this.xiang_shu=this.$route.path.split("/")[2]
		},
		activated() {
			
		},
		mounted:function(){
			var _self=this;
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//点击获取复选框中的值
			$(".xuan input").change(function(val){
				_self.fuxuan=[];
				$("input[name='zhong']:checkbox:checked").each(function(){ 
					_self.fuxuan.push($(this).val()) 
				})
				console.log(_self.fuxuan)
			})
			
			//达人标签
			$(".darenbiaoqian3").click(function(){
				$(this).siblings(".darenbiaoqian2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			
			//粉丝数
			$(".darenfensi3_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
			//监听input框的文字输入事件
			$(".darenfensi3_2 input").keyup(function(){
				if(_self.wan1 || _self.wan2){
					$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
						"background-color": "#fff",
						"color":"#999"
					})
					
					$(this).parents(".darenfensi3_2").siblings(".darenfensi3_1").children("ul").children("li").css({
						"background-color": "#fff",
						"color":"#999"
					})
				}else{
					$(this).parents(".darenfensi3").siblings(".darenfensi2").children(".buxian1").css({
						"background-color": "#0091FF",
						"color":"#fff"
					})
				}
			})
			$(".buxian1").click(function(){
				
				//点击让复选框全部不选中
				$('input[name="zhong"]').prop("checked",false);
				_self.fuxuan=[];
				
				$(this).css({
					"background-color": "#0091FF",
					"color":"#fff"
				})
				$(this).parents(".darenfensi2").siblings(".darenfensi3").children(".darenfensi3_1").children("ul").children("li").css({
					"background-color": "#fff",
					"color":"#999"
				})
				$(this).siblings(".darenbiaoqian3").children(".xuan").css({
					"background-color": "#fff",
					"color":"#999"
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			//获取下拉列表的值
			xiazhi(){
				console.log(val);
			},
			
			//粉丝总数
			qiehuan(){
				if(this.qie==0){
					this.huan=1;
					this.qie+=1;
				}else if(this.qie==1){
					this.huan=2;
					this.qie=3;
				}else if(this.qie==3){
					this.huan=0;
					this.qie=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie3=0;
				this.huan3=0;
				
				this.qie4=0;
				this.huan4=0;
				
				this.qie5=0;
				this.huan5=0;
				
				this.qie6=0;
				this.huan6=0;
			},
			//粉丝质量
			qiehuan1(){
				if(this.qie1==0){
					this.huan1=1;
					this.qie1+=1;
				}else if(this.qie1==1){
					this.huan1=2;
					this.qie1=3;
				}else if(this.qie1==3){
					this.huan1=0;
					this.qie1=0;
				}
				
				this.qie=0;
				this.huan=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie3=0;
				this.huan3=0;
				
				this.qie4=0;
				this.huan4=0;
				
				this.qie5=0;
				this.huan5=0;
				
				this.qie6=0;
				this.huan6=0;
			},
			//中位点赞数
			qiehuan2(){
				if(this.qie2==0){
					this.huan2=1;
					this.qie2+=1;
				}else if(this.qie2==1){
					this.huan2=2;
					this.qie2=3;
				}else if(this.qie2==3){
					this.huan2=0;
					this.qie2=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie=0;
				this.huan=0;
				
				this.qie3=0;
				this.huan3=0;
				
				this.qie4=0;
				this.huan4=0;
				
				this.qie5=0;
				this.huan5=0;
				
				this.qie6=0;
				this.huan6=0;
			},
			//中位评论数
			qiehuan3(){
				if(this.qie3==0){
					this.huan3=1;
					this.qie3+=1;
				}else if(this.qie3==1){
					this.huan3=2;
					this.qie3=3;
				}else if(this.qie3==3){
					this.huan3=0;
					this.qie3=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie=0;
				this.huan=0;
				
				this.qie4=0;
				this.huan4=0;
				
				this.qie5=0;
				this.huan5=0;
				
				this.qie6=0;
				this.huan6=0;
			},
			//中位分享数
			qiehuan4(){
				if(this.qie4==0){
					this.huan4=1;
					this.qie4+=1;
				}else if(this.qie4==1){
					this.huan4=2;
					this.qie4=3;
				}else if(this.qie4==3){
					this.huan4=0;
					this.qie4=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie3=0;
				this.huan3=0;
				
				this.qie=0;
				this.huan=0;
				
				this.qie5=0;
				this.huan5=0;
				
				this.qie6=0;
				this.huan6=0;
			},
			//近30天粉丝增量
			qiehuan5(){
				if(this.qie5==0){
					this.huan5=1;
					this.qie5+=1;
				}else if(this.qie5==1){
					this.huan5=2;
					this.qie5=3;
				}else if(this.qie5==3){
					this.huan5=0;
					this.qie5=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie3=0;
				this.huan3=0;
				
				this.qie4=0;
				this.huan4=0;
				
				this.qie=0;
				this.huan=0;
				
				this.qie6=0;
				this.huan6=0;
			},
			//深码指数
			qiehuan6(){
				if(this.qie6==0){
					this.huan6=1;
					this.qie6+=1;
				}else if(this.qie6==1){
					this.huan6=2;
					this.qie6=3;
				}else if(this.qie6==3){
					this.huan6=0;
					this.qie6=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie3=0;
				this.huan3=0;
				
				this.qie4=0;
				this.huan4=0;
				
				this.qie5=0;
				this.huan5=0;
				
				this.qie=0;
				this.huan=0;
			},
			
			open() {
				this.$confirm('此功能仅限高级版本使用，请升级后再试', '升级提示', {
				  confirmButtonText: '立即升级',
				  cancelButtonText: '我在想想',
				  type: 'warning',
				}).then(() => {
				 //  this.$message({
					// type: 'success',
					// message: '立即升级!'
				 //  });
				 this.$router.push('/home/'+this.$store.state.luyoushu+'/xufeizhongxin')
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '好好在想想哟！老表'
				  });          
				});
			 }
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.darensousuo{
		
		.fensiqian{
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 1rem 0.8rem;
			.darensou{
				
				.darensou1{
					float: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #D4D4D4;
					
					input{
						border: none;
						outline: none;
						width: 7rem;
						height: 1.1rem;
						letter-spacing: 0.02rem;
						padding-left:0.4rem ;
						font-size: 0.4rem;
					}
					input::placeholder{
						color: #D3D3D3;
						font-size: 0.35rem;
					}
					button{
						border: none;
						outline: none;
						padding: 0.3rem;
						background-color: #fff;
						font-size: 0.4rem;
					}
				}
				.darensou2{
					float: left;
					margin-left:1rem ;
					color: #333333;
					font-size: 0.5rem;
					letter-spacing: 0.05rem;
					margin-top:0.2rem ;
					
					span{
						color: #0091FF;
					}
				}
			}
			.darensou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.darenbiaoqian{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.darenbiaoqian1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenbiaoqian2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.darenbiaoqian3{
					flex: 11;
					.xuan{
						margin-left:1rem ;
						margin-bottom:1rem ;
						float: left;
						display: flex;
						justify-content: space-around;
						align-items: center;
						input{
							cursor: pointer;
						}
						label{
							padding-left:0.2rem ;
							cursor: pointer;
							color: #999;
							font-size: 0.45rem;
						}
						label:hover{
							color: #0091ff;
						}
					}
				}
				.darenbiaoqian3::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			
			.darenfensi{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				
				.darenfensi1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenfensi2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.darenfensi3{
					flex: 11;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.darenfensi3_1{
						flex: 2.65;
						
						ul{
							list-style: none;
							margin-left:0.5rem ;
							li{
								cursor: pointer;
								color: #999999;
								font-size: 0.4rem;
								padding: 0.1rem 0.4rem;
								float: left;
								margin-right:0.4rem ;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.darenfensi3_2{
						text-align: right;
						flex: 1;
						display: flex;
						align-items: center;
						
						.darenfensi_suan1{
							color: #999999;
							font-size: 0.4rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							input{
								width:1.5rem;
								height: 0.6rem;
								border: 1px solid #D4D4D4;
								outline: none;
								margin-right:0.3rem ;
								font-size: 0.35rem;
								padding: 0 0.2rem;
							}
						}
						.darenfensi_suan2{
							width: 0.6rem;
							height: 0.02rem;
							background-color: #D4D4D4;
							margin: 0 0.4rem;
							margin-top:0.1rem ;
						}
						.darenfensi_suan3{
							color: #999999;
							font-size: 0.4rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-right:0.4rem ;
							input{
								width:1.5rem;
								height: 0.6rem;
								border: 1px solid #D4D4D4;
								outline: none;
								margin-right:0.3rem ;
								font-size: 0.35rem;
								padding: 0 0.2rem;
							}
						}
						.darenfensi_suan4{
							color: #fff;
							background-color: #0091FF;
							padding: 0.1rem 0.3rem;
							font-size: 0.35rem;
							cursor: pointer;
						}
						@keyframes jello-horizontal {
						  0% {
						    transform: scale3d(1, 1, 1);
						  }
						  30% {
						    transform: scale3d(1.25, 0.75, 1);
						  }
						  40% {
						    transform: scale3d(0.75, 1.25, 1);
						  }
						  50% {
						    transform: scale3d(1.15, 0.85, 1);
						  }
						  65% {
						    transform: scale3d(0.95, 1.05, 1);
						  }
						  75% {
						    transform: scale3d(1.05, 0.95, 1);
						  }
						  100% {
						    transform: scale3d(1, 1, 1);
						  }
						}

						.darenfensi_suan4:hover{
							animation: jello-horizontal 0.9s both;
						}
					}
				}
			}
			
			.darenshuxing{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				.darenshuxing1{
					flex: 1;
					color: #333333;
					font-size: 0.45rem;
				}
				.darenshuxing2{
					line-height: 0.3rem;
					flex: 1;
					.buxian1{
						cursor: pointer;
						color: #fff;
						font-size: 0.4rem;
						background-color: #0091FF;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
					.buxian2{
						cursor: pointer;
						color: #999;
						font-size: 0.4rem;
						background-color: #fff;
						padding: 0.1rem 0.4rem;
						display: inline;
					}
				}
				.fenxing_xiala{
					flex: 11;
					
					.fenxing_xiala1{
						margin-left:0.8rem ;
						float: left;
						display: flex;
					}
					.fenxing_xiala2{
						float: left;
						margin-left:1rem ;
						display: flex;
					}
					.fenxing_xiala3{
						float: left;
						margin-left:1rem ;
						display: flex;
					}
					
				}
				.fenxing_xiala::after{
					content: "";
					display: block;
					clear: both;
				}
			}
		}
		
		.fensishaixuan{
			border-radius:0.1rem ;
			margin-top:1.5rem ;
			background-color: #fff;
			
			.fensishaixuantop{
				border-bottom:1px solid #E7E7E7 ;
				padding: 0.4rem 0.6rem;
				
				.fensishaixuantop1{
					color: #333;
					font-size: 0.45rem;
					float: left;
					line-height: 1rem;
				}
				.fensishaixuantop2{
					float: left;
					margin-left:0.4rem ;
					color: #333;
					font-size: 0.4rem;
					border: 1px solid #D4D4D4;
					padding: 0.2rem 0.4rem;
					box-sizing: border-box;
					
					span{
						color: #0091FF;
						font-size: 0.35rem;
					}
				}
			}
			.fensishaixuantop::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.fenshaibiao{
				padding: 0.6rem;
				table{
					width: 100%;
					th{
						color: #333;
						font-size: 0.45rem;
						padding: 0.6rem 0;
						font-weight: normal;
					}
					tr:hover td{
						background-color: rgba(229,244,255,1);
					}
					th:not(:first-child){
						cursor: pointer;
						padding-left:1.2rem ;
						box-sizing: border-box;
						.shangxia1{
							float: left;
						}
						.shangxia2{
							float: left;
							box-sizing: border-box;
							margin-left:0.2rem ;
							font-size: 0.4rem;
							margin-top:0.02rem ;
							color: #999999;
							
							i{
								display: block;
							}
							i:nth-of-type(2){
								margin-top:-0.2rem ;
							}
							.bianse{
								color:#1890FF ;
							}
						}
					}
					th:not(:first-child)::after{
						content: "";
						display: block;
						clear: both;
					}
					td{
						padding: 0.3rem 0;
						text-align: center;
						color: #000;
						font-size: 0.4rem;
						
						img{
							width: 1.3rem;
							border-radius:50% ;
						}
					}
					td:nth-of-type(1):hover{
						cursor: pointer;
					}
					td:nth-of-type(2) a{
						padding: 0.3rem 0;
						margin-left:0.6rem ;
						color: #000;
						text-decoration: none;
					}
					td:nth-of-type(2):hover a{
						color: #0091FF;
						cursor: pointer;
					}
					td:nth-of-type(9){
						color: #0091FF;
						font-size: 0.6rem;
					}
					td:nth-of-type(10){
						.jiaxuan{
							cursor: pointer;
							margin: auto;
							width: 3rem;
							border: 1px solid #ECECEC;
							padding: 0.1rem 0.2rem;
							border-radius:0.1rem ;
							color: #666666;
							font-size: 0.4rem;
							
							span{
								color: #0091FF;	
							}
						}
						@keyframes shake-top {
						  0%,
						  100% {
						    transform: rotate(0deg);
						    transform-origin: 50% 0;
						  }
						  10% {
						    transform: rotate(2deg);
						  }
						  20%,
						  40%,
						  60% {
						    transform: rotate(-4deg);
						  }
						  30%,
						  50%,
						  70% {
						    transform: rotate(4deg);
						  }
						  80% {
						    transform: rotate(-2deg);
						  }
						  90% {
						    transform: rotate(2deg);
						  }
						}

						.jiaxuan:hover{
							animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
							background-color: #0091FF;
							color: #fff;
							span{
								color: #fff;
							}
						}
					}
				}
				.mianfei{
					text-align: center;
					padding: 0.4rem 0;
					color: #707070;
					font-size: 0.3rem;
					span{
						color: #0091FF;
						cursor: pointer;
					}
				}
			}
		}
	}
	.el-scrollbar/deep/ .el-select-dropdown__item{
		padding-left:0.5rem ;
	}
</style>